<template>
	<view class="all-application">
		<uni-row :gutter="20" class="all-application-row">
			<uni-col :span="8">
				<scroll-view scroll-y class="left-box">
					<uni-list>
						<uni-list-item clickable @click="goodsAll">
							<template v-slot:header>
								<text :style="clickStyle">全部</text>
							</template>
						</uni-list-item>
						<uni-list-item clickable v-for="item in goodsClassification" :key="item.id"
							@click="goodsByClassification(item)">
							<template v-slot:header>
								<text :style="item.clickStyle">{{item.name}}</text>
							</template>
						</uni-list-item>
					</uni-list>
				</scroll-view>
			</uni-col>
			<uni-col :span="16">
				<view class="right-box">
					<scroll-view scroll-y class="scroll-Y">
						<good-cards :goods-info="goodsInfo" imageWidth="180rpx" image-height="200rpx"
							@reGerGoodsInfo="reGerGoodsInfo"></good-cards>
					</scroll-view>
				</view>
			</uni-col>
		</uni-row>
	</view>
</template>

<script>
	import homeApi from '../../api/home/index.js'
	import goodCards from '../goods/goodCards.vue'
	import goodsApi from '../../api/all-application/index.js'
	export default {
		data() {
			return {
				goodsClassification: [],
				goodsInfo: [],
				isAddCart: false,
				clickStyle: {},
				code: 0
			}
		},
		components: {
			goodCards
		},
		mounted() {
			this.getGoodsClassification()
			this.goodsAll()
		},
		methods: {
			async getGoodsClassification() {
				let res = await homeApi.goodsClassification()
				if (res.code == 200) {
					this.goodsClassification = res.list || []
				}
			},
			async goodsAll() {
				this.clickStyle = {
					color: 'red',
				}
				this.goodsClassification.map(item => {
					item.clickStyle = {}
				})
				let res = await goodsApi.goodsAll()
				if (res.code == 200) {
					this.goodsInfo = res.list || []
				}
			},
			async goodsByClassification(item) {
				this.clickStyle = {}
				this.goodsClassification.map(ele => {
					ele.clickStyle = {}
				})
				item.clickStyle = {
					color: 'red'
				}
				let res = await goodsApi.goodsByClassification({
					classification: item.code
				})
				if (res.code == 200) {
					this.goodsInfo = res.list || []
					this.code = item.code
				}
			},
			reGerGoodsInfo() {
				if (this.clickStyle.color) {
					this.goodsAll()
				} else {
					this.goodsByClassification({
						code: this.code
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all-application {
		.all-application-row {
			height: calc(100vh - 190rpx);

			.left-box {
				height: calc(100vh - 190rpx);
				// width: 100vw;
				background-color: #fff;
			}

			.right-box {
				.scroll-Y {
					height: calc(100vh - 190rpx);
				}
			}
		}
	}
</style>